<article class="auth">
  <h1 class="auth-header">Join the community</h1>
  <%= form_for @changeset, Routes.person_path(@conn, :join), [id: "join", class: "form form--full_width", multipart: true], fn f -> %>
    <div class="form-element_wrap <%= PublicHelpers.error_class(f, :name) %>">
      <div class="form-element">
        <label>Name<span>*</span></label>
        <%= text_input(f, :name, placeholder: "Grace Hopper", autofocus: true, required: true) %>
        <%= PublicHelpers.error_message(f, :name) %>
      </div>
    </div>

    <div class="form-element_wrap <%= PublicHelpers.error_class(f, :email) %>">
      <div class="form-element">
        <label>Email<span>*</span></label>
        <%= email_input(f, :email, placeholder: "grace@hopper.com", required: true, autocapitalize: "none") %>
        <%= PublicHelpers.error_message(f, :email) %>
      </div>
    </div>

    <div class="form-element_wrap <%= PublicHelpers.error_class(f, :handle) %>">
      <div class="form-element">
        <label>Username / Handle<span>*</span></label>
        <%= text_input(f, :handle, placeholder: "gracehopper", required: true, autocapitalize: "none", pattern: "^[a-z|0-9|_|-]+$") %>
        <%= PublicHelpers.error_message(f, :handle) %>
        <p class="form-element-note">Valid characters: a-z, 0-9, -, _</p>
      </div>
    </div>

    <div class="form-element_wrap">
      <div class="form-element <%= PublicHelpers.error_class(f, :avatar) %>">
        <label>Avatar</label>
        <%= file_input(f, :avatar) %>
        <%= PublicHelpers.error_message(f, :avatar) %>
        <p class="form-element-note">Ideally 600px by 600px. We'll crop it square.</p>
        <p class="form-element-note">Leave blank for gravatar.</p>
      </div>
    </div>

    <div class="form-element_wrap <%= PublicHelpers.error_class(f, :github_handle) %>">
      <div class="form-element">
        <label>GitHub Handle</label>
        <div class="form-element-preppended_field">
          <span>github.com/</span>
          <%= text_input(f, :github_handle, placeholder: "gracehopper", autocapitalize: "none") %>
        </div>
        <%= PublicHelpers.error_message(f, :github_handle) %>
      </div>
    </div>

    <div class="form-element_wrap <%= PublicHelpers.error_class(f, :twitter_handle) %>">
      <div class="form-element">
        <label>Twitter Handle</label>
        <div class="form-element-preppended_field">
          <span>twitter.com/</span>
          <%= text_input(f, :twitter_handle, placeholder: "gracehopper", autocapitalize: "none") %>
        </div>
        <%= PublicHelpers.error_message(f, :twitter_handle) %>
      </div>
    </div>

    <div class="form-element_wrap <%= PublicHelpers.error_class(f, :twitter_handle) %>">
      <div class="form-element">
        <label>Mastodon Handle</label>
        <div class="form-element-preppended_field">
          <span>@</span>
          <%= text_input(f, :mastodon_handle, placeholder: "gracehopper@changelog.social", autocapitalize: "none") %>
        </div>
        <%= PublicHelpers.error_message(f, :mastodon_handle) %>
      </div>
    </div>

    <div class="form-element_wrap <%= PublicHelpers.error_class(f, :linkedin_handle) %>">
      <div class="form-element">
        <label>LinkedIn Handle</label>
        <div class="form-element-preppended_field">
          <span>linkedin.com/in/</span>
          <%= text_input(f, :linkedin_handle, placeholder: "gracehopper", autocapitalize: "none") %>
        </div>
        <%= PublicHelpers.error_message(f, :linkedin_handle) %>
      </div>
    </div>

    <div class="form-element_wrap">
      <div class="form-element" style="text-align: center;">
        <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
        <div class="cf-turnstile" data-sitekey="0x4AAAAAAAAnzevzjdGT8igM" style="display: inline-block;"></div>
      </div>
    </div>

    <div class="form-checklist">
      <div class="form-checklist-item">
        <label>
          <input name="news_subscribe" type="checkbox">
          <span class="form-checklist-item-box"></span>
          <span class="form-checklist-item-text">Sign me up for Changelog News!</span>
        </label>
      </div>
    </div>

    <div class="form-submit">
      <div class="form-submit-note">
        <div>Already a member? <em><%= link("Sign in", to: Routes.sign_in_path(@conn, :new), title: "") %></em></div>
      </div>

      <input type="submit" value="Join Now">
    </div>
  <% end %>
</article>
